<template>
  <!-- 搜索表单 -->
  <div class="filterContent">
    <a-form layout="inline" :model="filterForm">
      <a-form-item label="计划类型">
        <a-select
          v-model:value="filterForm.planType"
          placeholder="请选择"
          style="width: 180px"
          allowClear
        >
          <a-select-option
            v-for="item in PLAN_TYPE"
            :key="item.value"
            :value="item.value"
            :label="item.name"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="需求响应类型">
        <a-select
          v-model:value="filterForm.companyId"
          placeholder="请选择"
          style="width: 180px"
          allowClear
          show-search
          optionFilterProp="label"
          filter-option
        >
          <a-select-option
            v-for="item in DEMAND_RESPONSE"
            :key="item.value"
            :value="item.value"
            :label="item.name"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="需求计划日期">
        <a-date-picker
          v-model:value="filterForm.planDate"
          placeholder="请选择日期"
          format="YYYY-MM-DD"
          valueFormat="YYYY-MM-DD"
          style="width: 180px"
        />
      </a-form-item>
      <a-form-item label="申报截止日期">
        <a-range-picker
          v-model:value="filterForm.deadlineDateRange"
          format="YYYY-MM-DD"
          valueFormat="YYYY-MM-DD"
        />
      </a-form-item>
      <a-form-item label="状态">
        <a-select
          v-model:value="filterForm.state"
          placeholder="请选择"
          style="width: 180px"
          allowClear
        >
          <a-select-option
            v-for="item in PLAN_TYPE"
            :key="item.value"
            :value="item.value"
            :label="item.name"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="状态">
        <a-select
          v-model:value="filterForm.planStatus"
          placeholder="请选择"
          style="width: 180px"
          allowClear
        >
          <a-select-option
            v-for="item in PLAN_TYPE"
            :key="item.value"
            :value="item.value"
            :label="item.name"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="中标结果">
        <a-select
          v-model:value="filterForm.winningBidResult"
          placeholder="请选择"
          style="width: 180px"
          allowClear
        >
          <a-select-option
            v-for="item in WINNING_BID_RESULT"
            :key="item.value"
            :value="item.value"
            :label="item.name"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="计划名称">
        <a-input
          v-model:value="filterForm.planName"
          placeholder="请输入"
          style="width: 180px"
        />
      </a-form-item>
      <a-form-item label="计划编号">
        <a-input
          v-model:value="filterForm.number"
          placeholder="请输入"
          style="width: 180px"
        />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="handleSearch" class="filterBtn">
          查询
        </a-button>
        <a-button class="filterBtn greenBtn" @click="handleAdd">
          日前备用申报
        </a-button>
      </a-form-item>
    </a-form>
  </div>

  <!-- 表格 -->
  <div class="tableContent" ref="tableContainerRef">
    <a-table
      :dataSource="tableData"
      :columns="columns"
      size="small"
      :scroll="tableScroll"
      :pagination="false"
      :loading="tableLoading"
      bordered
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'handle'">
          <a-button type="link" @click="handleView(record)">详情</a-button>
          <a-button type="link" @click="handleParticipate(record)"
            >参与申报</a-button
          >
        </template>
        <template v-else-if="column.key === 'currentStatus'">
          <a-tag :color="getStatusColor(record.currentStatus)">
            {{ record.currentStatus }}
          </a-tag>
        </template>
      </template>
    </a-table>
    <a-pagination
      v-model:current="filterForm.current"
      v-model:page-size="filterForm.size"
      :total="total"
      position="bottomRight"
      show-size-changer
      @change="getList"
      :show-total="(total) => `总共 ${total} 条`"
    >
      <template #buildOptionText="props">
        <span>{{ props.value }}条/页</span>
      </template>
    </a-pagination>
  </div>

  <!-- 参与申报弹窗 -->
  <!-- <ParticipateModal
    v-model:visible="participateModalVisible"
    :recordData="currentRecord"
    @refresh="getList"
  /> -->
  <!-- 参与申报弹窗 - 月度备用 -->
  <ParticipateModal
    v-model:visible="participateModalVisible"
    :recordData="currentRecord"
    @refresh="getList"
  />

  <!-- 参与申报弹窗 - 需求响应 -->
  <DemandResponseModal
    v-model:visible="demandResponseModalVisible"
    :recordData="currentRecord"
    @refresh="getList"
  />
  <!-- 需求计划详情弹窗 -->
  <DemandPlanDetailModal
    v-model:visible="detailModalVisible"
    :recordData="tableData[0]"
  />
</template>

<script setup>
import { ref, reactive, onMounted, inject, nextTick } from "vue"
import useTableScroll from "@/hooks/useTableScroll"
import ParticipateModal from "./components/ParticipateModal.vue"
import DemandResponseModal from "./components/DemandResponseModal.vue"
import DemandPlanDetailModal from "./components/DemandPlanDetailModal.vue"
import {
  PLAN_TYPE,
  DEMAND_RESPONSE,
  STATE,
} from "@/constants/VirtualPowerPlant"
const tableData = ref([])
const total = ref(0)
const $api = inject("$api")

const filterForm = reactive({
  planType: null,
  companyId: null,
  planDate: null,
  deadlineDateRange: null,
  planName: null,
  planStatus: null,
  winningBidResult: null,
  number: null,
  current: 1,
  size: 20,
})

const columns = [
  {
    title: "计划编号",
    dataIndex: "planCode",
    key: "planCode",
    width: 120,
    align: "center",
  },
  {
    title: "计划名称",
    dataIndex: "planName",
    key: "planName",
    width: 200,
    align: "center",
  },
  {
    title: "计划类型",
    dataIndex: "planType",
    key: "planType",
    width: 120,
    align: "center",
  },
  {
    title: "需求响应类型",
    dataIndex: "demandResponseType",
    key: "demandResponseType",
    width: 200,
    align: "center",
  },
  {
    title: "月度需求容量(MW)",
    dataIndex: "monthlyDemandCapacity",
    key: "monthlyDemandCapacity",
    width: 150,
    align: "center",
  },
  {
    title: "备用开始日期/响应开始时间",
    dataIndex: "startDate",
    key: "startDate",
    width: 200,
    align: "center",
  },
  {
    title: "备用结束日期/响应结束时间",
    dataIndex: "endDate",
    key: "endDate",
    width: 200,
    align: "center",
  },
  {
    title: "备用范围/需求范围",
    dataIndex: "demandRange",
    key: "demandRange",
    width: 150,
    align: "center",
  },
  {
    title: "申报截止时间",
    dataIndex: "deadlineTime",
    key: "deadlineTime",
    width: 150,
    align: "center",
  },
  {
    title: "当前状态",
    dataIndex: "currentStatus",
    key: "currentStatus",
    width: 100,
    align: "center",
  },
  {
    title: "中标结果",
    dataIndex: "winningBidResult",
    key: "winningBidResult",
    width: 100,
    align: "center",
  },
  {
    title: "申报时间",
    dataIndex: "applyTime",
    key: "applyTime",
    width: 150,
    align: "center",
  },
  {
    title: "邀约时间",
    dataIndex: "inviteTime",
    key: "inviteTime",
    width: 150,
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "handle",
    key: "handle",
    width: 180,
    align: "center",
    fixed: "right",
  },
]

// 获取分页列表
const handleSearch = async () => {
  filterForm.current = 1
  await getList()
}

const tableLoading = ref(false)
const getList = async () => {
  tableLoading.value = true
  try {
    // 这里需要根据实际API调整
    // const res = await $api.getDemandPlanList(filterForm)
    // tableData.value = res.data.records
    // total.value = res.data.total

    // 模拟数据
    tableData.value = [
      {
        id: 1,
        planCode: "GZDY000001",
        planName: "2025年8月需求计划",
        planType: "月度备用",
        demandResponseType: "日前需求响应",
        monthlyDemandCapacity: 10000,
        startDate: "2025-06-01 00:00:00",
        endDate: "2025-06-30 23:59:59",
        demandRange: "全网范围",
        deadlineTime: "2025-05-25 12:00:00",
        currentStatus: "已申报",
        winningBidResult: "未中标",
        applyTime: "2025-06-25 10:26:38",
        inviteTime: "2025-06-20 09:00:00",
      },
      {
        id: 2,
        planCode: "GZDY000002",
        planName: "2025年7月需求计划",
        planType: "需求响应",
        demandResponseType: "日内需求响应",
        monthlyDemandCapacity: 20000,
        startDate: "2025-07-01 00:00:00",
        endDate: "2025-07-31 23:59:59",
        demandRange: "重点区域",
        deadlineTime: "2025-06-25 12:00:00",
        currentStatus: "未申报",
        winningBidResult: "中标",
        applyTime: "2025-07-25 11:12:38",
        inviteTime: "2025-07-20 09:00:00",
      },
      {
        id: 3,
        planCode: "GZDY000003",
        planName: "2025年9月需求计划",
        planType: "月度备用",
        demandResponseType: "日前无功需求响应",
        monthlyDemandCapacity: 15000,
        startDate: "2025-09-01 00:00:00",
        endDate: "2025-09-30 23:59:59",
        demandRange: "城区范围",
        deadlineTime: "2025-08-25 12:00:00",
        currentStatus: "已出清",
        winningBidResult: "中标",
        applyTime: "2025-09-25 14:30:15",
        inviteTime: "2025-09-20 09:00:00",
      },
    ]
    total.value = 3
  } catch (error) {
    console.error("获取列表失败:", error)
  } finally {
    tableLoading.value = false
  }
}

// 新增
const handleAdd = () => {
  console.log("自动生成计划")
  // 这里添加自动生成计划的逻辑
}

// 详情弹窗相关

const currentRecord = ref({})
const detailModalVisible = ref(false)
// 编辑/查看详情
const handleView = (record) => {
  currentRecord.value = record
  detailModalVisible.value = true
}

// 获取状态颜色
const getStatusColor = (status) => {
  const colorMap = {
    已申报: "green",
    未申报: "orange",
    已出清: "blue",
  }
  return colorMap[status] || "default"
}

const tableContainerRef = ref(null)
const { tableScroll } = useTableScroll(tableData, tableContainerRef, 100)

onMounted(() => {
  getList()
})
// 参与申报相关
const participateModalVisible = ref(false)
const demandResponseModalVisible = ref(false)

// 参与申报
const handleParticipate = (record) => {
  currentRecord.value = record

  // 根据计划类型判断弹出哪个组件
  if (record.planType === "月度备用") {
    participateModalVisible.value = true
  } else if (record.planType === "需求响应") {
    demandResponseModalVisible.value = true
  }
}
</script>

<style lang="less" scoped>
.filterBtn {
  margin: 0 10px 0 0;
  &:last-child {
    margin-right: 0;
  }
}

.tableContent {
  flex: 1;
  background-color: #1f1f1f;
  border-radius: 4px;
  padding: 16px;

  :deep(.ant-table) {
    background-color: transparent;

    .ant-table-thead > tr > th {
      background-color: #2a2a2a;
      border-bottom: 1px solid #434343;
      color: #fff;
    }

    .ant-table-tbody > tr > td {
      background-color: #1f1f1f;
      border-bottom: 1px solid #434343;
      color: #fff;
    }

    .ant-table-tbody > tr:hover > td {
      background-color: #2a2a2a;
    }
  }
}

:deep(.ant-table) {
  background: #141414;
}

:deep(.ant-pagination) {
  margin-top: 16px;
  text-align: right;
}
</style>
